﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Kagilo Testing</title>
    <style type="text/css">
    <!--
    
        html, body { margin:0; padding:0; font-size:12px; line-height:20px; }
        a { color:#000000; text-decoration:none; }
        
        .container { margin:auto; padding:10px;}
        .c1 { float:left; width:100px; margin-right:5px;}
        .c2 { float:left; width:150px; margin-right:5px; }
        .c3 { float:left; width:200px; margin-right:5px; }
        .c4 { float:left; width:300px; margin-right:5px; }
        .c5 { float:left; width:400px; margin-right:5px; }
        .c6 { float:left; width:500px; margin-right:5px; }
        .clear { clear:both; }
        
        .b, .bt, .bc, .bm       /*  */
        { 
	        
        }
        
        .b          /* box */
        {
            position:relative;  /* 为了使 .bm(更多) 飘到右上角 */
            background:#ffffff url(box.gif) no-repeat bottom left;  /* 整个box的背景，定位是 下左 */
        }
        
        .bt         /* box title */
        {
            background:#ffffff url(box.gif) no-repeat top left;  /* 还是同一个背景图，但定位是 上左 */
            height:28px; line-height:28px;  /* 标题的高度 */
            
            padding-left:5px;   /* 为了美观，左边空一点 */
            color:#CA1A00; font-size:14px; font-weight:bold;    /* 标题的字段，当然要好看点 */
        }
        .bc         /* box content */
        {
            background:#ffffff url(box.gif) no-repeat bottom right;  /* 内容区还是一个背景，定位是 下右 */
            margin-left:5px;    /* 注意，给左边5px的内补丁，这样把下左的边框显示出来：重要！ */
        }
        .bm         /* box more */
        {
            position:absolute; top:0; right:0;  /* 相对定位，在右上 */
            height:28px; line-height:28px;  /* 高度 */ 
            background:#ffffff url(box.gif) no-repeat top right;  /* 内容区还是一个背景，定位是 上右 */
            
            padding-right:5px;   /* 为了美观，右边空一点 */
        }
    -->
</style>
</head>
<body>

    圆角框框1例子:
    <div class="container">
        
        <div class="c1">
            <div class="b">
                <div class="bt">标题</div>
                <div class="bc">内容</div>
                <div class="bm">更多</div>
            </div>
        </div>
        
        <div class="c2">
            <div class="b">
                <div class="bt">标题2</div>
                <div class="bc">要要要要<br />要要要要<br /></div>
                <div class="bm"></div>
            </div>
        </div>
        
        <div class="c3">
            <div class="b">
                <div class="bt">标题3</div>
                <div class="bc">浮要要档要要枯<br />要要要要<br /><br />要要要要</div>
                <div class="bm">更多...</div>
            </div>
        </div>
        
        <div class="c4">
            <div class="b">
                <div class="bt">标题4</div>
                <div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
                <div class="bm"></div>
            </div>
        </div>
        
        <div class="c5">
            <div class="b">
                <div class="bt">标题5</div>
                <div class="bc">要要要要<br />要要要要<br />要要要要<br />要要要要<br />要要要要<br /></div>
                <div class="bm">更多...</div>
            </div>
        </div>
        
        <div class="c6">
            <div class="b">
                <div class="bt">标题4</div>
                <div class="bc">内容</div>
                <div class="bm">更多...</div>
            </div>
        </div>
        
        <div class="clear"></div>
    </div>

    <div>Kagilo@126.com</div>

</body>
</html>